---
icon: LightningIcon
---

import { compileMdx } from 'nextra/compile'
import { Callout } from 'nextra/components'
import { MDXRemote } from 'nextra/mdx-remote'

# Next.js Static Rendering

[Static Rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default)
is default server rendering strategy, where routes are rendered at **build
time** or in the background after
[data revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration).
The result is cached and can be distributed via a
[Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN)
for optimal performance.

Static rendering is ideal for routes with non-personalized data that can be
determined at build time, such as blog posts or product pages.

<SSGPage />

export async function SSGPage() {
  const starsComponent = `{/* Via async components */}
export async function Stars() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const stars = repo.stargazers_count
  return <b>{stars}</b>
}

{/* Via async functions */}
export async function getUpdatedAt() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const updatedAt = repo.updated_at
  return new Date(updatedAt).toLocaleDateString()
}

<Callout emoji="🏆">
  Nextra has <Stars /> stars on GitHub!

  Last repository update _{await getUpdatedAt()}_.
</Callout>`
  const mdx = `${starsComponent}

The number above was generated at build time via MDX server components. With
[Incremental Static Regeneration](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration)
enabled, it will be kept up to date.

## Example

Here's the MDX code for the example above:

~~~mdx filename="MDX"
${starsComponent}
~~~
`
  const rawJs = await compileMdx(mdx)
  return <MDXRemote compiledSource={rawJs} components={{ Callout }} />
}
